<template>
  <main class="container">
    <!-- 顶部标题 -->
    <CHeader v-if="currentView === 'main'" />

    <!-- 区域详情页面 -->
    <div v-if="currentView === 'detail'" class="detail-container">
      <div class="detail-header">
        <h1>{{ selectedArea?.title }}房屋详情</h1>
        <button @click="backToMain" class="back-btn">返回地图</button>
      </div>

      <div class="detail-content">
        <div class="detail-table-container">
          <h2>{{ selectedArea?.title }}房屋信息</h2>
          <table class="detail-table">
            <thead>
              <tr>
                <th>楼栋号</th>
                <th>房屋类型</th>
                <th>面积(m²)</th>
                <th>状态</th>
                <th>价格(万元)</th>
                <th>预售证状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(house, index) in getAreaHouses(selectedArea?.id || '')" :key="index">
                <td>{{ house.building }}</td>
                <td>{{ house.type }}</td>
                <td>{{ house.area }}</td>
                <td>
                  <span :class="['status', house.status]">{{ house.status }}</span>
                </td>
                <td>{{ house.price }}</td>
                <td>
                  <span :class="['license', house.license]">{{ house.license }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <CDwg class="dwg-container"/>
    </div>

    <!-- 主页面内容 -->
    <div v-if="currentView === 'main'">
      <!-- 可缩放图片部分 -->
      <div class="image-container">
        <div class="image-content">
          <CZoomableImage :image-url="'/img/area.jpg'" alt-text="蟠龙观邸" :initial-scale="1" :min-scale="0.5"
            :max-scale="3" :interactive-areas="interactiveAreas" :debug-mode="false"
            @view-details="handleViewDetails" />
        </div>
      </div>
      <!-- 左侧数据面板 -->
      <LeftPanel />
      <!-- 右侧数据面板 -->
      <RightPanel />
      <!-- 底部组件 -->
      <CFooter />
    </div>
  </main>
</template>

<script setup lang="ts">
import CHeader from '@/components/CHeader.vue'
import CZoomableImage from '@/components/CZoomableImage.vue'
import LeftPanel from '@/components/leftPanel.vue'
import RightPanel from '@/components/rightPanel.vue'
import CFooter from '@/components/CFooter.vue'
import CDwg from '@/components/CDwg.vue'

import { ref, onMounted } from 'vue'
import autofit from 'autofit.js'


// 定义交互区域
interface InteractiveArea {
  id: string
  title: string
  description: string
  points: { x: number; y: number }[]
}

const interactiveAreas = ref<InteractiveArea[]>([
  {
    id: 'A区',
    title: 'A区',
    description: '蟠龙观邸A区：部分房屋已办理预售证，多层主要以尾盘居多，高层多数房源未办理预售证。',
    points: [
      { x: 80, y: 352 },
      { x: 215, y: 252 },
      { x: 402, y: 340 },
      { x: 266, y: 466 }
    ]
  },
  {
    id: 'B区',
    title: 'B区',
    description: '蟠龙观邸B区：部分房屋已办理预售证，所售房屋承诺交房时间为2019年底。',
    points: [
      { x: 226, y: 249 },
      { x: 348, y: 162 },
      { x: 506, y: 231 },
      { x: 393, y: 341 }
    ]
  },
  {
    id: 'C区',
    title: 'C区',
    description: '蟠龙观邸C区：部分房屋已办理预售证，所售房屋承诺交房时间为2020年底，2023年下半年已全部交房。',
    points: [
      { x: 363, y: 150 },
      { x: 455, y: 75 },
      { x: 613, y: 130 },
      { x: 511, y: 226 }
    ]
  },
  {
    id: 'D区',
    title: 'D区',
    description: '蟠龙观邸D区：全部1114套商品房，未办理预售证，也未进行销售。',
    points: [
      { x: 520, y: 226 },
      { x: 619, y: 134 },
      { x: 794, y: 195 },
      { x: 714, y: 304 }
    ]
  },
  {
    id: 'E区',
    title: 'E区',
    description: '蟠龙观邸E区：全部852套商品房，未办理预售证，也未进行销售。',
    points: [
      { x: 404, y: 341 },
      { x: 516, y: 231 },
      { x: 706, y: 315 },
      { x: 613, y: 445 }
    ]
  },
  {
    id: 'F区',
    title: 'F区',
    description: '蟠龙观邸F区：部分房屋已办理预售证，多层主要以尾盘居多，高层多数房源未办理预售证。',
    points: [
      { x: 269, y: 467 },
      { x: 404, y: 343 },
      { x: 600, y: 443 },
      { x: 478, y: 602 }
    ]
  }
])

// 房屋数据
interface House {
  building: string
  type: string
  area: number
  status: string
  price: number
  license: string
}

const houseData: Record<string, House[]> = {
  'A区': [
    { building: 'A1栋', type: '多层住宅', area: 89, status: '在售', price: 120, license: '已办理' },
    { building: 'A2栋', type: '高层住宅', area: 110, status: '待售', price: 145, license: '未办理' },
    { building: 'A3栋', type: '多层住宅', area: 95, status: '尾盘', price: 125, license: '已办理' },
    { building: 'A4栋', type: '高层住宅', area: 120, status: '待售', price: 160, license: '未办理' }
  ],
  'B区': [
    { building: 'B1栋', type: '多层住宅', area: 85, status: '在售', price: 115, license: '已办理' },
    { building: 'B2栋', type: '高层住宅', area: 105, status: '在售', price: 140, license: '已办理' },
    { building: 'B3栋', type: '多层住宅', area: 92, status: '尾盘', price: 122, license: '已办理' }
  ],
  'C区': [
    { building: 'C1栋', type: '高层住宅', area: 108, status: '已售', price: 142, license: '已办理' },
    { building: 'C2栋', type: '高层住宅', area: 115, status: '已售', price: 152, license: '已办理' },
    { building: 'C3栋', type: '多层住宅', area: 88, status: '尾盘', price: 118, license: '已办理' }
  ],
  'D区': [
    { building: 'D1栋', type: '高层住宅', area: 125, status: '待售', price: 165, license: '未办理' },
    { building: 'D2栋', type: '多层住宅', area: 98, status: '待售', price: 130, license: '未办理' },
    { building: 'D3栋', type: '高层住宅', area: 135, status: '待售', price: 178, license: '未办理' }
  ],
  'E区': [
    { building: 'E1栋', type: '高层住宅', area: 120, status: '待售', price: 158, license: '未办理' },
    { building: 'E2栋', type: '多层住宅', area: 90, status: '待售', price: 120, license: '未办理' }
  ],
  'F区': [
    { building: 'F1栋', type: '多层住宅', area: 87, status: '在售', price: 117, license: '已办理' },
    { building: 'F2栋', type: '高层住宅', area: 112, status: '待售', price: 148, license: '未办理' },
    { building: 'F3栋', type: '多层住宅', area: 93, status: '尾盘', price: 123, license: '已办理' }
  ]
}

const currentView = ref<'main' | 'detail'>('main')
const selectedArea = ref<InteractiveArea | null>(null)

const getAreaHouses = (areaId: string): House[] => {
  return houseData[areaId] || []
}

const handleViewDetails = (area: InteractiveArea) => {
  selectedArea.value = area
  currentView.value = 'detail'
}

const backToMain = () => {
  currentView.value = 'main'
  selectedArea.value = null
}

onMounted(() => {
  autofit.init({
    el: 'body',
    dh: 1080,
    dw: 1920,
    resize: true
  })
})
</script>

<style lang="scss" scoped>
.dwg-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 400px); // 高度从表格下方延伸到屏幕底部
  overflow: hidden;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('@/assets/images/背景.png') no-repeat center center;
  background-size: 100% 100%;
}

.detail-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 20px;

  h1 {
    font-size: 32px;
    color: #fff;
    margin: 0;
  }

  .back-btn {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;

    &:hover {
      background: #0056b3;
    }
  }
}

.detail-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: calc(100% - 100px);
}

.detail-table-container {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 30px;
  width: 80%;
  max-width: 1200px;

  h2 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
  }
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;

  th,
  td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  th {
    background: rgba(0, 123, 255, 0.3);
    font-weight: bold;
  }

  tr:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;

    &.在售 {
      background: #28a745;
    }

    &.待售 {
      background: #ffc107;
      color: #000;
    }

    &.尾盘 {
      background: #17a2b8;
    }

    &.已售 {
      background: #dc3545;
    }
  }

  .license {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;

    &.已办理 {
      background: #28a745;
    }

    &.未办理 {
      background: #dc3545;
    }
  }
}

.image-container {
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
    z-index: 100;
  }

  .image-content {
    position: relative;
    width: 900px;
    height: 690px;
  }
}
</style>